<template>
  <div class="scrool">
      <div id="zrender-canvas"></div>
  </div>
</template>

<script setup>
/* eslint-disable */
import {onMounted,ref } from "vue"
import * as zrender from 'zrender'
import {createCircle,createSector,creatText,creatImg} from '@/components/charts/basecharts'
import {options} from '@/components/charts/data'

const zr = ref(null)
const group = ref({})
const group4 = ref({})
const group5 = ref({})



// 计算角度  根据不同的角度象限去判断应该加还是减去
function calcCoordinate(startPoint, r, angle,gap=0) {
let qAngle 
if (angle >= 0 && angle < 90) {
  qAngle = angle
} else if (angle >= 90 && angle < 180) {
  qAngle = 180 - angle
} else if (angle >= 180 && angle < 270) {
  qAngle = angle - 180
} else {
  qAngle = 360 - angle
}
 // 第二步:计算坐标增量
 const _x = Math.cos((qAngle * Math.PI) / 180) * r
 const _y = Math.sin((qAngle * Math.PI) / 180) * r
 // 第三步:求未知点坐标
let result
const [x, y] = startPoint
if (angle >= 0 && angle < 90) {
  result = [x + _x+gap, y + _y+gap]
} else if (angle >= 90 && angle < 180) {
  result = [x - _x-gap, y + _y+gap]
} else if (angle >= 180 && angle < 270) {
  result = [x - _x-gap, y - _y - gap]
} else {
  result = [x + _x+gap, y - _y -gap]
}  
  return result
}

function getangle(angle) {
let qAngle // 象限角
if (angle >= 0 && angle < 90) {
  qAngle = angle
} else if (angle >= 90 && angle < 180) {
  qAngle = 180 - angle
} else if (angle >= 180 && angle < 270) {
  qAngle = angle - 180
} else {
  qAngle = 360 - angle
}
return qAngle

}

const init = ()=> {
  zr.value = zrender.init(document.getElementById('zrender-canvas'))
  group.value = new zrender.Group()
  group4.value = new zrender.Group()
  group5.value = new zrender.Group()

  for(let i=0;i<7;i++) {
      let circle = createCircle(250,250,30+i*20,{lineDash:[5],stroke:'#e3e7e9',text:'hello'})
      group.value.add(circle)   
  }
  // group.value.draggable=true
  // 定义梯形
  var triangleSelf = zrender.Path.extend({
      type: 'triangleSelf',
      shape:{
          x: 10,
          y: 0,
          width: 0,
          height: 0
      },
      buildPath: function (ctx, shape) {
          let rotate = shape.rotate
          let [x,y] = calcCoordinate([250,250],shape.r,rotate,shape.gap)
          let [x1,y1] = calcCoordinate([250,250],shape.r,rotate+10,shape.gap)
          let [x2,y2] = calcCoordinate([250,250],shape.r+20,rotate,shape.gap)
          let [x3,y3] = calcCoordinate([250,250],shape.r+20,rotate+10,shape.gap)
          ctx.beginPath();
          ctx.moveTo(x,y);
          ctx.lineTo(x1,y1); 
          ctx.lineTo(x3,y3);
          ctx.lineTo(x2,y2);
          ctx.closePath(); // 闭
     }
  })
  function renders(angle,options) {
   for(let k=0;k<options.length;k++) {   //梯形组
    // 计算出cx，cy：起始点，r:半径1；r0半径2；startAngle；endAngle其实终止角度
    let index = 0,sum = 0,startAngle =  0,endAngle = 0
    if(k>0) {
        index = k
        for(let p=0;p<index;p++) {
          sum+= options[p].data.length
        }
        startAngle = (angle + sum*10 + 1.1*sum) 
        endAngle =   (angle + (sum + options[k].data.length)*10 + 1.1*(sum + options[k].data.length)) 
      } else {
         sum = options[k].data.length
         startAngle = angle 
         endAngle = (angle + sum*10 + 1.1*sum)
      }
    // 盛放文字和环装扇形的组
    console.log(startAngle,endAngle)
    let group = new zrender.Group()
    let circle = createSector(250,250,40,70,startAngle* Math.PI / 180,endAngle* Math.PI / 180,{fill:options[k].color,stroke:'none'})
    let cirText = creatText(options[k].name,options[k].textColor,'16px')
    group.add(circle)
    group.add(cirText)
    // 文字所处的半径处，计算所需的这角度
    cirText.position = calcCoordinate([250,250],50,(startAngle + endAngle)/2)
    // cirText.rotation = getangle(endAngle) * Math.PI / 180
    group4.value.add(group)
    for(let j=0;j<options[k].data.length;j++) {  //成一个长条梯形
         let textColor =  options[k].data[j].value>2 ? options[k].colors[options[k].colors.length-1] : '#000000'
        let Text = creatText(options[k].data[j].text, textColor)   //每一个长条梯形的文字
      for(let i=0;i<options[k].data[j].value;i++) {
          let color = options[k].colors
          // let rotate = j>0 ? angle + 8*j + 5*j : angle
          // 此处1.1是为了梯形之间的间隙

          // 前n-1个data所有长度加起来的和
          let index = 0,sum = 0
          if(k>0) {
            index = k
            for(let p=0;p<index;p++) {
              sum+= options[p].data.length
            }
          }
          let rotate = (j + sum)>0 ? angle +  10*(j + sum) + 1.1*(j+sum)  : angle

          //一个sf对应一个梯形
          let sf = new triangleSelf({   
          shape: {
                  x: 250,
                  y: 250,
                  r:70+20*i,
                  gap:0.5*i,
                  rotate
              },
          style: {
              stroke:'none',
              fill:color[i],
              lineWidth: 2,
          }
        })
        group4.value.add(sf)
        // 加白色分割区域
        // if(j==options[k].data.length-1) {
        //      let start =  angle +  10*(j+1+ sum) + 1.1*(j+sum)
        //      let end = rotate =  angle +  10*(j+2+ sum) + 1.1*(j+1+sum)
        //      let setor = createSector(250,250,40,30+20*6,start* Math.PI / 180,end* Math.PI / 180,{fill:'#ffffff',stroke:'none'})
        //      group4.value.add(setor)
        //   }
      } 
      let index = 0,sum = 0
      if(k>0) {
        index = k
        for(let p=0;p<index;p++) {
          sum+= options[p].data.length
        }
      }
  //文字xy的位置   文字放置在第一格梯形渲染的地方
   let [x,y] = calcCoordinate([250,250],70,angle+10*(j + sum)+ 1.1*(j + sum))
   Text.position = [x,y]
   Text.rotation = getangle(angle+10*(j + sum)+ 1.1*(j + sum)) * Math.PI / 180
   group4.value.add(Text)
  }
}

let innerCircle = createCircle(250,250,35,{stroke:'#9fe9fd',lineWidth:15,shadowColor:"#cccccc",shadowBlur:50})
let innerCircle2 = createCircle(250,250,30,{stroke:'none',fill:'#78befe'})
let innerCircle3 = createCircle(250,250,23,{stroke:'#fff',fill:'none'})

let Sector1= createSector(250,250,40,45,15*Math.PI / 180,40*Math.PI/180,{fill:'#33c1e3',stroke:"none",shadowBlur:1})
let Sector2= createSector(250,250,40,45,65*Math.PI / 180,145*Math.PI / 180,{fill:'#33c1e3',stroke:"none",shadowBlur:1})
let Sector3= createSector(250,250,40,45,180*Math.PI / 180,215*Math.PI / 180,{fill:'#61dbf1',stroke:"none",shadowBlur:1})
let Sector4= createSector(250,250,40,45,245*Math.PI / 180,340*Math.PI / 180,{fill:'#70e2f5',stroke:"none",shadowBlur:1})

let Sector5= createSector(250,250,21,26,35*Math.PI / 180,85*Math.PI/180,{fill:'#fff',stroke:"none"})
let Sector6= createSector(250,250,21,26,120*Math.PI / 180,170*Math.PI / 180,{fill:'#fff',stroke:"none"})
let Sector7= createSector(250,250,21,26,190*Math.PI / 180,260*Math.PI / 180,{fill:'#fff',stroke:"none"})
let Sector8= createSector(250,250,21,26,290*Math.PI / 180,350*Math.PI / 180,{fill:'#fff',stroke:"none"})
// 图片大小
let [width,height] = [30,30]
let img = creatImg(require('@/assets/logo.png'),[250 - (width / 2),250 - (height/2)],[width,height])
group5.value.add(innerCircle)
group5.value.add(innerCircle2)
group5.value.add(innerCircle3)

group5.value.add(img)
group5.value.add(Sector1)
group5.value.add(Sector2)
group5.value.add(Sector3)
group5.value.add(Sector4)
group5.value.add(Sector5)
group5.value.add(Sector6)
group5.value.add(Sector7)
group5.value.add(Sector8)

// group4.value.add(group5.value)
   
}
  zr.value.add(group.value)
  zr.value.add(group4.value)
  renders(270,options)
  // renders(100)

}

onMounted(() => {
  init()
})
</script>

<style scoped>
.scrool {
  position: relative;
  height: 600px;
  width: 800px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
#zrender-canvas {
  width:500px;
  height:500px;
}


</style>